<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div  id="app">
	 <!-- <header align="left">
	  	<div class="layui-btn-container">
	  		<el-button  icon="el-icon-plus" type="primary" @click="add">添加</el-button>
			
	  		<el-button icon="el-icon-delete" type="danger">删除</el-button>
	  	</div>
	  </header> -->
   <!-- <div >
      <vxe-grid border size="medium" :tree-config="tableTreeConfig"  resizable ref="xGrid" :data="tableData" :columns="tableColumn"  >
      </vxe-grid>
    </div> -->
	<div>
			<el-table
				:data="tableData"
				row-key="id"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				:header-cell-style="{background:'#f2f2f2'}"
				style="width: 100%;margin-top: 20px"
				max-height="500"
				@selection-change="handleSelectionChange">
			<el-table-column align="center" label="id" width="55">
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column label="登录名" align="center">
				<template slot-scope="scope">
					{{ scope.row.loginName }}
				</template>
			</el-table-column>
			<el-table-column label="头像" align="center">
				<template slot-scope="scope">
					<el-popover placement="right" title="" trigger="hover">
						<img :src="scope.row.avatar" class="img"/>
						<img slot="reference" :src="scope.row.avatar" :alt="scope.row.avatar" style="max-height: 50px;max-width: 130px">
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.createTime}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
			<template slot-scope="scope">
		
			<el-button size="mini" icon="el-icon-delete" type="danger"  @click="open(scope.row.id)"  >删除</el-button>
			<el-button size="mini" icon="el-icon-edit" type="primary" @click="update(scope.row.id)">编辑</el-button>
			</template>
			</el-table-column>
		</el-table>
			<!--分页-->
			<el-pagination class="page" :total='total' :page-size="10" layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
  <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
  <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="js/002.js"></script>
</body>
</html>